<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" href="../css/index.css" />
	</head>

	<body>

		<!--首页组件-->
		<template id="home">
			<div class="home">
				<!--导航-->
				<ul class="gps">
					<li v-for="item in types">{{item.name}}</li>
				</ul>

				<!--轮播图-->
				<div class="banner">
					<ul id='picBox'>
						<li>
							<img src="//r1.ykimg.com/0510000058C687F1AD9E0705CD0B9C98" alt="" />
						</li>
						<li>
							<img src="//r1.ykimg.com/0510000058C8840DADC0AE05D202E52D" alt="" />
						</li>
						<li>
							<img src="//r1.ykimg.com/0510000058C75E4EADC0AE05C30E3AB8" alt="" />
						</li>
						<li>
							<img src="//r1.ykimg.com/0510000058BFEEB5ADB912EA14057B1C" alt="" />
						</li>
					</ul>
				</div>
				<!--电影分类列表-->
				<div class="typeNav">
					<div class="types">
						<label>全部:</label>
						<ul class="listBox">
							<li v-for="item in types">{{item.name}}</li>
						</ul>
					</div>
					<div class="city" v-show="isshow">
						<label>全部:</label>
						<ul class="listBox">
							<li v-for="item in types">{{item.name}}</li>
						</ul>
					</div>
					<div class="tip">
						<span @click="changTip">{{tip}} </span>
					</div>
				</div>
				<!--电影列表-->
				<div class="list">
					<div class="tit">
						共1100个筛选结果
					</div>
					<ul class="listShow" id="listShow">
						<li v-for="item in showList" class="AVli" >
							<router-link :to="{path:'/details',query:{id:item.flag} }" >
								<img :src="item.pic" alt="" />
								<p class="AVname">{{item.name}}</p>
								<p>主演:{{item.star}}</p>
								<p>36.7万次播放</p>
							</router-link>
						</li>

					</ul>
				</div>

			</div>
		</template>
		<!--详情页组件-->
		<template id="details">
			<div class="details">
				<div class="detailOne">
					<div class="picBox">
						<img :src="detailData.pic" alt="" />
					</div>
					<div class="content">
						<h3>电影：{{detailData.name}}</h3>
						<ul class="tit">
							<li>
								<p>上映时间　：{{detailData.year}}</p>
								<p>导演 ：{{detailData.director}}</p>
							</li>
							<li>
								<p>更新时间　：{{detailData.createTime}}</p>
								<p>主演 ：{{detailData.star}}</p>
							</li>
							<li>
								<p>类型：{{detailData.types}}</p>
								<p>地区 ：{{detailData.city}}</p>
							</li>
						</ul>
						<div class="info">
							<p>{{detailData.content}}</p>
						</div>
						<div class="btn"><a :href="detailData.movie">立即播放</a></div>
					</div>
				</div>
			</div>
		</template>

		<div id="app" class="app">
			<!--顶部固定导航-->
			<div class="headFlex">
				<div class="head">
					<div class="logo"><span class="logoLeft">51</span><span class="logoRight">Look</span></div>
					<ul class="headNav">
						<li class="Border">
							<a>首页</a>
						</li>
						<li class="Border">
							<a>发现</a>
						</li>
						<li class="Border">
							<a>订阅</a>
						</li>
						<li class="Border">
							<a>会员</a>
						</li>
						<li>
							<a>我的</a>
						</li>
					</ul>
					<div class="search">
						<input type="search" />
						<span>查询</span>
					</div>
				</div>
			</div>

			<router-view></router-view>
			<div style="height:600px"></div>
		</div>

		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.min.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/tools.js"></script>
		<script src="../js/index.js"></script>

	</body>

</html>